<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import IatRecorder from '@u/iat/iatRecorder.js'
const VITE_WS_URL = import.meta.env.VITE_WS_URL
const content = ref('');//录音识别内容
let interval = null;//定时器
const isRecording = ref(false)

const iatRecorder = new IatRecorder()
iatRecorder.onWillStatusChange = async (oldStatus, status) => {
  let countInterval = null,seconds = 0
    if (status === "ing"){
    countInterval = setInterval(() => {
      seconds++;
      if (seconds >= 60) {
        iatRecorder.stop();
        clearInterval(countInterval);
      }
    }, 1000);
  }else if (status === "init"){
    seconds = 0;
  }else if (status === "end"){
    clearInterval(countInterval);
  }
}
iatRecorder.onTextChange = async (txt) => {
  if (iatRecorder.status === "end"){
    if(txt){
      console.log('语音返回测试1',txt)
      content.value = txt
      isRecording.value = false
    }
  }else {
    if(txt){
        console.log('语音返回测试2',txt)
        content.value = txt
        if(iatRecorder.status === 'end'){
            isRecording.value = false
        }
    }
  }
}

const startRecording = () =>{
    isRecording.value = true
    iatRecorder.start()
}
const stopRecording = () =>{
    isRecording.value = false
    iatRecorder.stop()
}
const clearContent = () =>{
    content.value = ''
}

const handleKeydown = (e) => {     
  if (e.code === "Space") {
    isRecording.value = true
    iatRecorder.start()
  }
  window.removeEventListener("keydown", handleKeydown);
}
const handleKeyup = (e) => {
    if (e.code === "Space") {
        isRecording.value = false
        iatRecorder.stop()
    }
    window.addEventListener("keydown", handleKeydown);
}
window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);

</script>

<template>
  <div class="recorder">
    <div class="recorder-container">
        <div class="recorder-container-left">
            <canvas class="recorder-canvas" ref="visualizer" width="600" height="200"></canvas>
            <div class="recorder-button-container">
                <button :class="['recorder-button',isRecording?'':'keydowns']" @click="isRecording ? stopRecording() : startRecording()">
                {{ isRecording ? '停止录音' : '开始录音' }}
                </button>
                <button :class="['recorder-button', isRecording ? 'recorder-button-play' : '']" :disabled="isRecording" @click="playRecording">
                    播放
                </button>
            </div>
        </div>
        <div class="recorder-container-right">
            <div class="recorder-content-header">
                <h1 class="recorder-content-title">录音识别内容</h1>
                <button class="recorder-button" @click="clearContent">
                    清除内容
                </button>
            </div>
            <div class="recorder-content">
                <textarea class="recorder-textarea" placeholder="录音识别内容" readonly :value="content"></textarea>
            </div>
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recorder {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;  
    .recorder-container {
        display: flex;
        flex-direction: row;
        height: 100%;
        gap: 20px;
        padding: 0 20px 20px;
        box-sizing: border-box;
        .recorder-container-left {
            display: flex;
            flex-direction: column;
            // background-color: #ccc;
            .recorder-canvas{
                border: 1px solid #ccc;
                margin-bottom: 20px;
            }
            .recorder-button-container{
                display: flex;
                gap: 20px;
                .recorder-button{
                    width: 120px;
                    height: 50px;
                    padding: 10px 20px;
                    font-size: 16px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    background-color: #fff;
                    cursor: pointer;
                    &.recorder-button-play{
                        background-color: rgba(0, 0, 0, 0.5);
                        color: rgba(255, 255, 255, 0.5);
                    }
                    &.keydowns{
                        background:#45a049;
                        color: #fff;
                    }
                }
            }

        }
        .recorder-container-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #ccc;
            .recorder-content-header{
                margin: 10px 0;
                padding:0 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 30px;
                line-height: 30px;
                box-sizing: border-box;
                .recorder-content-title{
                    font-size: 20px;
                    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2); // 添加阴影
                }
                .recorder-button{
                    width: 100px;
                    height: 30px;
                    padding: 0 20px;
                    font-size: 14px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    background-color: #fff;
                    cursor: pointer;                    
                }
            }
            .recorder-content{
                flex: 1;
                .recorder-textarea{
                    width: 100%;
                    height: 100%;
                    border: 1px solid #ccc;
                    outline: none;
                    resize: none;
                    padding: 10px;
                    box-sizing: border-box;
                }
            }
        }
    }
}


</style>